<template>
	<aside>
		<el-dialog	
			  class="attendanceDialog"
			  :visible.sync="pageShow"
			  :close-on-click-modal="false"
			  :modal="false"	
			  :before-close="closeDialog"
			   element-loading-background="rgba(0, 0, 0, 0.1)"
			  custom-class="attendance"			  
			  >
			  <div class="title">({{param.studentName}})餐费记录</div>
			  <div class="content-box">
			  		<div class="tablecss">
	              		<table   border="0" style="width:100%;" cellpadding="0" cellspacing="0">
			      			<thead >
			      				<tr >
			      					<th>记录日期</th>
			      					<th>考勤</th>
			      					<th>
										<span :style="param.recordMode!=''?'color:#609df9;':''">用餐记录</span>
										<el-popover
											placement="bottom"
											width="150"
											trigger="click"
											v-model="popovervisible">
											<div style="width:100%;text-align: left;">
												<el-radio-group v-model="param.recordMode" @change="queryChange">
													<el-radio label='1' style="margin:0;margin-bottom: 0.08rem;">
														已用餐
														<i class="el-icon-success" style="color:rgb(64, 158, 255);"></i>
													</el-radio>
													<el-radio label='0' style="margin:0;margin-bottom: 0.08rem;">
														未用餐
														<i class="el-icon-error" style="color:rgb(245, 108, 108);"></i>
													</el-radio>
													<el-radio label='2' style="margin:0;">
														未出勤,有餐
														<i class="el-icon-warning" style="color:rgb(230, 162, 60);"></i>
													</el-radio>
												</el-radio-group>
											</div>
											<div style="width:100%;text-align: center;">
												<!-- <el-button type="text" @click="queryCheck">筛选</el-button> -->
												<el-button type="text" @click="resetCheck">重置</el-button>
											</div>
											<i slot="reference" :style="param.recordMode!=''?'color:#609df9;font-weight: bold;':'font-weight: bold;'"
											 class="el-icon-arrow-down" ></i>
										</el-popover>
									</th>
			      					<th v-if="mealsType==1">是否退费</th>	
			      					<th>记录老师</th>					      						      					
			      				</tr>				      				
			      			</thead>
			      			<tbody  v-if="attendlist.length>0">
			      				<tr v-for="li in attendlist" :key="li.studentMealsRecordId">
			      					<td align="center">{{li.mealsTime}}</td>
									<td align="center">{{signModeMap[li.signinMode]}}</td>
			      					<td align="center">
										  {{li.mealsName}}
										  <i v-if="li.recordMode==1" class="el-icon-success" style="color:rgb(64, 158, 255);" title="已用餐"></i>
										  <i v-else-if="li.recordMode==2" class="el-icon-warning" style="color:rgb(230, 162, 60);" title="未出勤,有餐"></i>
										  <i v-else class="el-icon-error" style="color:rgb(245, 108, 108);" title="未用餐"></i>
									</td>
			      					<td align="center" v-if="mealsType==1">{{li.refundLable}}</td>
									<td align="center">{{li.updateUserrName}}</td>
			      				</tr>	      				
			      			</tbody>
			      			<tbody  v-else>
				      				<tr>
				      					<td colspan="11" align="center">暂无数据</td>
				      				</tr>
				      		</tbody>
		      		    </table>
			      	</div>
			   </div>
			  <div class="pagePanel">
			    	<el-pagination	 
			    	  class="page"	
			    	  @current-change="curChange"
				      @size-change="pageSizeChange"
				      :page-size="pager.pagesize"	
				      :current-page="pager.currpage"
				      layout="total, sizes, prev, pager, next, jumper"
				      :total="pager.totalnum">
		    		</el-pagination>
	    	   </div>
		</el-dialog>
		
	</aside>		
</template>

<script>
	let vm;
	export default{
		data(){
			return {
				pageShow:false,
				popovervisible:false,
				signModeMap:{},
				attendlist:[],
				/**1-午餐；2-晚餐 */
				mealsType:1,
				param:{
					startTime:'',
					endTime:'',	
					recordMode:'',
				},
				pager:{
					totalnum:0,
					pagesize:10,
					currpage:1,
				}
			}
		},
		methods:{
			/**
			 * @param data {} 
			 * 必须   mealsType mealsId studentId studentName
			 * 非必须 startTimeSettlement endTimeSettlement
			 */
			init(data){
				vm.mealsType=data.mealsType;
				vm.pageShow = true;
				vm.param=data;
				vm.param.recordMode='';
				vm.attendlist=[];
			   	vm.searchData(1);
				    
			},
			/**获取餐费记录的时间段 */
			getStartEndTime(){
				let now = new Date(); //当前日期 
			    let nowMonth = now.getMonth()-1; //上一个月 
			    let nowYear = now.getFullYear(); //当前年 
			    //本月的开始时间
			    let monthStartDate = new Date(nowYear, nowMonth, 1); 
			    //本月的结束时间
			    let monthEndDate = new Date(nowYear, nowMonth+1, 0);
			    
			    let sTime = tool.DateToString(monthStartDate,"yyyy-MM-dd HH:mm")
			    let eTime = tool.DateToString(monthEndDate,"yyyy-MM-dd HH:mm")
			},
			/**
			 * 获取数据列表
			 */
			searchData(pageIndex){
				this.pager.currpage=pageIndex||this.pager.currpage;
			    let param = {
					mealsId:this.param.mealsId,	    	
			    	studentId:this.param.studentId,
			    	startTime:this.param.startTime,
			    	endTime:this.param.endTime,
			    	currPage:this.pager.currpage,
					pageSize:this.pager.pagesize,
					recordMode:this.param.recordMode
			    }			
			    api.getStudentMealsRecorAndSigninListPage(param).then(function(data){
			    	if(data.resultCode==2000){
			    		vm.pager.totalnum = data.totalCount;
						vm.attendlist = data.list;
						vm.attendlist.forEach(row=>{
							//名称
							row.mealsName='晚餐';
							if(vm.mealsType==1){
								row.mealsName='中餐';
							}
							//是否退费
							row.refundLable='';
							if(row.recordMode==0&&row.isRefund==1){
								row.refundLable='退费';
							}
							else if(row.recordMode==0&&row.isRefund==0){
								row.refundLable='不退费';
							}
							//时间截取
							row.mealsTime=row.mealsTime.substr(0,10);
						});
			    	}
			    })
			},
			/**
			 * 当前页变化
			 */
			curChange(val){
				vm.searchData(val);
			},
			/**
			 * 页数变化
			 */
			pageSizeChange(val){
				vm.pager.pagesize = val;
				vm.searchData(1);
			},
			/**
			 * 关掉
			 */
			closeDialog(){
				vm.pageShow = false;
			//	vm.$emit('closeDialog');
			},
			queryChange(){
				this.popovervisible=false;
				this.searchData(1);
			},
			// queryCheck(){
			// 	this.popovervisible=false;
			// },
			resetCheck(){
				this.popovervisible=false;
				this.param.recordMode='';
				this.searchData(1);
			}
		},
		mounted(){
			vm = this;
			this.signModeMap=tool.getDictNameByValue(-100,'signin_mode',false);
		}
	}
</script>

<style lang="scss">
	@import "@/style/module/utils.scss";
	.attendance{
		width:8rem !important;;
		border-radius: .1rem !important;;	
		margin-top:10vh !important;
		
	}
	.attendanceDialog{
		z-index: 30 !important;
        // top: 0.81rem !important;
        // left: 2.1rem !important;
        background-color:rgba(0,0,0,0.5) !important;
		.el-dialog__header{
			padding: 0px;
		}
		.el-dialog__body{
			padding: 0px !important;
		}	
		.el-dialog__footer{
			padding: .3rem;
			.footer-btn{
				width:100%;
				text-align: center;
			}									
		}
		
		.title{
			width:100%;
			height: 0.6rem;
			padding: 0.2rem 0.3rem;
			font-size: 0.2rem;
			font-weight: bold;					
		}
		.content-box{
			width:100%;
			height: auto;
			padding: 0.2rem 0.3rem;
		}
		.pagePanel{
			width:100%;
			height: auto;
			padding: 0.2rem 0.3rem;
		}
	}
	// .el-popover{
	// 	text-align: center;
	// }
</style>